<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<button class="tab-item">服务保障</button>
			<button class="tab-item">实时保障</button>
			<button class="tab-item">质量保障</button>
			<button class="tab-item">价格保障</button>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar"@click="onSearch">
			<uni-search-bar @confirm="search" @input="input"v-model="searchKey">请搜索关键字</uni-search-bar>
		</view>
	</view>
	<!-- 图标按钮区域 -->
	<view class="icon-grid">
	  <uni-grid :column="5" show-border="false" :highlight="false" style="text-align: center; margin-top: 5px;">
	      <view class="icon-item" v-for="(item, index) in iconList" :key="index" @click="icon">
	        <image :src="item.icon" class="icon-image"></image>
	        <text class="icon-text">{{ item.text }}</text>
	      </view>
	  </uni-grid>
	</view>
	     
	

	<!-- 服务预约表单 -->
	<view class="form-container" @click="goyy">
		<text >立即预约上门服务</text>
			<view class="form-item"style="margin-top: 25px;">服务任务: {{ selectedTask }}</view>
		<input type="text" placeholder="请输入手机号" v-model="contact" class="form-item" />
		<input type="text" placeholder="请输入详细地址" v-model="address" class="form-item" />
		<button class="submit-btn">点击预约</button>
	</view>
	  <view class="container">
	    <!-- Service Section -->
	    <view class="service-section">
	      <text class="section-title">超值服务</text>
	      <view class="service-items">
	        <view class="service-item">
	          <image class="service-image1" src="/static/墙面翻修.jpg" />
	          <text class="service-text">墙面翻新</text>
	        </view>
	        <view class="service-item">
	          <image class="service-image1" src="/static/水电维修.jpg" />
	          <text class="service-text">水电维修</text>
	        </view>
	        <view class="service-item">
	          <image class="service-image1" src="/static/家电维修.jpg" />
	          <text class="service-text">家电维修</text>
	        </view>
	      </view>
	    </view>
	
	    <!-- 广告位 -->
	    <view class="promo-banner">
	      <text class="promo-title">限时补贴</text>
	      <text class="promo-date">有效期至2024年2月28日</text>
	      <image class="promo-image" src="/static/images/promotion.png" />
	    </view>
	  </view>
	  
	  
	 
	  <!-- 优选服务 -->
   <view class="container3">
      <view class="title3">优选服务</view>
      <view class="service-list3" >
        <view class="service-item3" v-for="(item, index) in services" :key="index">
         <uni-card >
           <img :src="getYeupText(item)" class="iit" @click="iii" />
           <h3 class="primary" >{{ getPrimaryText(item) }}</h3>
           <p class="money" @click="oop" >{{ getMoney(item) }}0元起预约</p>
         </uni-card>
        </view>
      </view>
    </view>
     <!-- 预约展示 -->

					<card>
						<button class="mini-btn" type="default" size="mini">家电维修</button>
									<button class="mini-btn" type="default" size="mini">门窗维修</button>
									<button class="mini-btn" type="default" size="mini">水电维修</button>
									<button class="mini-btn" type="default" size="mini">防水补漏</button>
									</card>
									
											  <view class="card">
											    <image class="card-image" src="/static/家电维修.jpg" />
											    <view class="card-content" >
													<text class="card-title">家电维修</text>
													<text class="card-description">报修30天/价格保障/快速响应</text>
													<button class="card-button">立即预约</button>
											    </view>
											  </view>
											  <view class="card">
											    <image class="card-image" src="/static/门窗维修.jpg" />
											    <view class="card-content">
											      <text class="card-title">门窗维修</text>
											      <text class="card-description">报修30天/价格保障/快速响应</text>
											      <button class="card-button">立即预约</button>
											    </view>
											  </view>
											  <view class="card">
											    <image class="card-image" src="/static/水电维修.jpg" />
											    <view class="card-content">
											      <text class="card-title">水电维修</text>
											      <text class="card-description">报修30天/价格保障/快速响应</text>
											      <button class="card-button">立即预约</button>
											    </view>
											  </view>
											  <view class="card">
											    <image class="card-image" src="/static/防水补漏.jpg" />
											    <view class="card-content">
											      <text class="card-title">防水补漏</text>
											      <text class="card-description">报修30天/价格保障/快速响应</text>
											      <button class="card-button">立即预约</button>
											    </view>
											  </view>
									
</template>

<script>

	export default {
		data() {
    return {
      searchValue: '',
      services: [],
      searchHistory: [],
    };
  },
		data() {
			return {
				selectedTask: '请选择服务项目', // 默认选项
				contact: '', // 联系方式
				address: '' ,// 服务地址
				 iconList: [
				        { icon: '/static/家电维修.png', text: '家电' },
				        { icon: '/static/防水补漏.png', text: '防水' },
				        { icon: '/static/门窗维修.png', text: '门窗' },
				        { icon: '/static/水电维修.png', text: '水电' },
				        { icon: '/static/墙面维修.png', text: '墙面' },
				      ],
					    services: [
					          {
					            photo: '/static/防水补漏.jpg', // 阳台漏水图片路径
					            skills: '防水补漏',
					            experience: ''
					          },
					          {
					            photo: '/static/阳台漏水.png', // 灶具维修图片路径
					            skills: '阳台漏水',
					            experience: ''
					          },
					          {
					            photo: '/static/水电维修.jpg', // 马桶图片路径
					            skills: '水电维修',
					            experience: ''
					          }
					        ],
			}
		},
		methods: {
			// 获取图片地址
			getYeupText(item) {
			  return item.photo || '';
			},
			// 获取标题文本
			getPrimaryText(item) {
			  return item.skills || '';
			},
			goyy (){
				this.$router.push('/pages/booking/booking')
			},
			// 获取金额文本
			getMoney(item) {
			  return item.money || '';
			},
			
			// 从 localStorage 读取搜索结果
			    loadSearchResultsFromLocalStorage() {
			      const key = 'searchResult_' + this.searchValue; // 构造存储键
			      const data = window.localStorage.getItem(key);
			      if (data) {
			        this.services = JSON.parse(data); // 解析 JSON 字符串并更新 services
			      }
			    },
			
			// 进行搜索
			  async onSearch() {
			    if (!this.searchValue.trim()) {
			      uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
			      return;
			    }
			
			    this.saveSearchHistory(this.searchValue);
			    console.log(this.searchValue);
			    
			    try {
			      const res = await uni.request({
			        url: 'http://localhost:8087/ry/profiles/queries/' + this.searchValue,
			        method: 'get',
			        header: {
			          'Content-Type': 'application/json'
			        }
			      });
			
			      // 将搜索结果存储到 localStorage
			      const key = 'searchResult_' + this.searchValue; // 为每个搜索关键词创建一个独立的键
			      window.localStorage.setItem(key, JSON.stringify(res.data.data));
			
			      this.services = res.data.data || [];
			    } catch (error) {
			      console.error('搜索失败:', error);
			      uni.showToast({ title: '搜索失败，请稍后再试', icon: 'none' });
			    }
			  },
			
			
			iii(){
				this.$router.push('/pages/categoryy/categoryy')
			},
			oop(){
				this.$router.push('/pages/booking/booking')
			},
			icon (){
				this.$router.push('/pages/category/category')
			},
			onServiceTaskChange(e) {
				this.selectedTask = e.detail.value;
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
		
				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			submitForm() {
				// 提交表单处理逻辑
				console.log(`任务: ${this.selectedTask}, 联系方式: ${this.contact}, 地址: ${this.address}`);
			},
			onSearch(value) {
				this.searchValue = value;
				console.log('搜索内容: ', this.searchValue);
				// 这里可以添加执行搜索的逻辑
			},
			// 清除搜索框
			onClear() {
				this.searchValue = '';
				console.log('搜索框已清空');
			},
			onSearch() {
				this.searchKey = '';
			     if (this.searchKey.trim()) { // 如果有搜索关键词
			       uni.navigateTo({
			         url: `pages/mine/mine?key=${encodeURIComponent(this.searchKey)}`// 跳转到搜索页面并传递关键词
			       });
				   uni.navigateTo({
				           url: '/pages/mine/mine'
				         });
			     }else{
					  uni.navigateTo({
					         url: '/pages/mine/mine'
					       });
				 }
			   },
			   mounted() {
			       // 在组件挂载后尝试从 localStorage 加载搜索结果
			       this.loadSearchResultsFromLocalStorage();
			     },
		}
	}
</script>

<style>
	.iit {
	  width: 40px;
	  height: 40px;
	  border-radius: 5px;
	  object-fit: cover;
	}
	.primary {
	  font-size: 10px;
	  color: red;
	  margin-top: 0px;
	}
	
	.money {
	  font-size: 10px;
	  border-radius: 5px;
	  background-color: #7a76fa;
	  color: cyan;
	  margin-top: 5px;
	}
	/* 顶部导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-around;
		background-color: #f5f5f5;
		padding: 10px;
	}

	.tab-item {
		font-size: 14px;
		color: #333;
	}

	/* 搜索栏样式 */
	.search-bar {
		font-size: 14px;
		color: #333;
	}

	/* 图标区域样式 */
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
	}

	.grid-item {
		width: 20px;
		text-align: auto;
		margin: 10px 0;
	}

	.grid-icon {
		width: 40px;
		height: 40px;
	}

	.grid-text {
		margin-top: 5px;
		font-size: 12px;
	}

	/* 表单区域样式 */
	.form-container {
		 background: linear-gradient(to top, #6a11cb, #2575fc);
		padding: 20px;
		border-radius: 10px;
		margin: 20px 10px;
		text-align: center;
		
	}

	.form-item {
		margin-bottom: 15px;
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
		font-size: 14px;
	}

	.submit-btn {
		width: 100%;
		padding: 10px;
		background-color: #7a76fa;
		color: #fff;
		text-align: center;
		border-radius: 5px;
	}
	.mini-btn {
		height: 30px;
		margin-right: 6px;
	}
	.card-image {
	  width: 95px;
	  height: 95px;
	  border-radius: 5px;
	  margin-right: 15px;
	  padding: 0;
	}
	
	.card-content {
	  flex: 1;
	}
	
	.card-title {
	  font-size: 15px;
	  font-weight: bold;
	  color: #333;
	  margin-top: 100px;
	}
	
	.card-description {
	  font-size: 8px;
	  color: #666;
	  padding-top: 100px;
	}
	
	.card-button {
	  padding: 5px 15px;
	  background-color: #7a76fa;
	  color: #fff;
	  border-radius: 4px;
	  font-size: 14px;
	  text-align: center;
	  border: none;
	  height: 40px;
	  width: 90px;
	  margin-top: 10%;
	  margin-right: 75%;
	}
	.card {
	  display: flex;
	  align-items: center;
	  padding: 15px;
	  background-color: #fff;
	  border-radius: 8px;
	  margin: 10px 0;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	  width: 90%;
	  margin-left: auto;
	  margin-right: auto;
	  height: 120px;

	}
	
	
	.card-content {
	  flex: 1;
	}
	.container {
	  background-color: #f5f5f5;
	  padding: 10px;
	}
	
	.service-section {
	  background-color: #e7e5ff;
	  border-radius: 10px;
	  padding: 15px;
	  margin-bottom: 10px;
	}
	
	.section-title {
	  font-size: 18px;
	  color: #7a76fa;
	  margin-bottom: 10px;
	}
	
	.service-items {
	  display: flex;
	  justify-content: space-between;
	}

	
	.service-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 30%;
	  background-color: #fff;
	  border-radius: 8px;
	  padding: 10px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	  overflow: hidden; /* 隐藏图片超出容器的部分 */
	    padding: 0; /* 去除卡片内边距 */
		
	}

	.service-image1{
		width: 50px;
		height: 50px;
	}
	
	.service-text {
	  font-size: 14px;
	  color: black;
	}
	
	.promo-banner {
	  display: flex;
	  align-items: center;
	  background-color: #7a76fa;
	  border-radius: 10px;
	  padding: 15px;
	}
	
	.promo-title {
	  color: #fff;
	  font-size: 16px;
	  font-weight: bold;
	  margin-right: 10px;
	}
	
	.promo-date {
	  color: #dcd9ff;
	  font-size: 12px;
	}
	
	.promo-image {
	  width: 40px;
	  height: 40px;
	  margin-left: auto;
	}
	

	

	.icon-grid {
		height:75px;
	  padding: 0;
	  background-color: #ffffff;
	}
	
	.icon-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.icon-image {
	  width: 40px;
	  height: 40px;
	  margin-bottom: 5px;
	}
	
	.icon-text {
	  font-size: 15px;
	  color: #666;
	  text-align: center;
	  height: 35px;
	  width: 75px;
	  border:;
	}
	.service-image1{
		width: 102px;
		height: 50px;
	}
	.container3 {
	  padding: 20px;
	  background-color: #fff;
	}
	
	.title3 {
	  font-size: 16px;
	  color: #333;
	  margin-bottom: 10px;
	  font-weight: bold;
	}
	
	.service-list3 {
	  display: flex;
	  justify-content: space-between;
	}
	
	.service-item3 {
	  width: 30%;
	  text-align: center;
	}
	
	.service-image3 {
	  width: 100px;
	  height: 100px;
	  border-radius: 10px;
	}
	
	.service-title3 {
	  font-size: 14px;
	  color: #333;
	  margin-top: 5px;
	}
	
	.service-desc3 {
	  font-size: 12px;
	  color: #888;
	  margin-top: 2px;
	}
	
	.service-button3 {
	  margin-top: 10px;
	  padding: 5px 10px;
	  background-color: #586bfb;
	  color: #fff;
	  border-radius: 5px;
	  font-size: 14px;
	}
	.search-bar{
		
	}
</style>